<template>
  <footer :style="{ background: yjBgc }" v-if="state">
    <div>
      <div class="badge">
        <div>Copyright © 2024</div>
        <div style="background-color: #00a3ff">
          {{ variable.blog_name.value }}
        </div>
      </div>

      <div class="pyramid-loader">
        <div class="wrapper">
          <span class="side side1"></span>
          <span class="side side2"></span>
          <span class="side side3"></span>
          <span class="side side4"></span>
          <span class="shadow"></span>
        </div>
      </div>

      <div class="badge ba" @click="redirectToExternalLink">
        <div>{{ variable.icp1.value }}</div>
        <div style="background-color: #50cd89">{{ variable.icp2.value }}</div>
      </div>
    </div>
  </footer>
</template>
<script setup>
const axios = inject("axios");
import variable from "../../js/variable";
const route = useRoute();

const state = ref(true);

const yjBgc = ref("#F7F9FE");

onMounted(() => {
  //查询配置、设置
  axios
    .get("allocation/findYxsj")
    .then((response) => {
      let res = response.data;
      if (res.code == 200) {
        variable.pzsz.value = res.data;

        res.data.allocations.forEach((item) => {
          if (item.name == "icp") {
            if (item.content.match(/([^\d]+)(\d+)/)) {
              //处理备案信息
              variable.icp1.value = item.content.match(/([^\d]+)(\d+)/)[1]; // 包含文字的部分
              variable.icp2.value = item.content.match(/([^\d]+)(\d+)/)[2]; // 包含数字的部分
            }
          }

          //设置网站的favicon图标
          if (item.name == "bloglog") {
            variable.logo.value = item.content;

            const faviconLink = document.createElement("link");
            faviconLink.rel = "icon";
            faviconLink.type = "image/png";
            faviconLink.href = item.content;
            document.head.appendChild(faviconLink);
          }

          if (item.name == "bz_tx") {
            variable.bz_tx.value = item.content;
          }

          if (item.name == "bz_name") {
            variable.bz_name.value = item.content;
          }

          if (item.name == "blog_name") {
            variable.blog_name.value = item.content;
          }
        });
      }
    })
    .catch();
});

function redirectToExternalLink() {
  window.open("https://beian.miit.gov.cn/#/Integrated/index", "_blank");
}

watch(
  () => route.name,
  (newV, oldV) => {
    if (newV == "Zhongxin") {
      yjBgc.value =
        "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 60%)";
    } else if (newV == "TreeHole") {
      //有些页面不显示
      state.value = false;
    } else {
      yjBgc.value = "#F7F9FE";
    }
  }
);

onMounted(() => {
  //防止页面刷新，颜色被改变
  if (route.name == "Zhongxin") {
    yjBgc.value =
      "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 60%)";
  } else if (route.name == "TreeHole") {
    //有些页面不显示
    state.value = false;
  } else {
    yjBgc.value = "#F7F9FE";
  }
});
</script>
<style scoped>
footer {
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  user-select: none;
}

footer > div {
  width: 500px;
  height: 100%;
  display: flex;
  justify-content: center;
  justify-content: space-around;
}

.badge {
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.badge div {
  padding: 3px 10px;
  font-size: 12px;
  color: #fff;
}

.badge div:nth-child(1) {
  background-color: #5d5d5d;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.badge div:nth-child(2) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.badge div:nth-child(2) {
  background-color: #fff;
}

.ba {
  cursor: pointer;
}

.ba:hover div:nth-child(2) {
  color: #555555;
}

@media (max-width: 800px) {
  footer {
    display: none;
  }
}

/* ----------------------旋转的三角体开始 */
.pyramid-loader {
  position: relative;
  bottom: 30px;
  width: 100px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

.pyramid-loader .wrapper .side {
  width: 70px;
  height: 70px;
  /* you can choose any gradient or color you want */
  /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-loader .wrapper .side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient(#2bdeac, #f028fd, #d8cce6, #2f2585);
}

.pyramid-loader .wrapper .side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient(#2f2585, #d8cce6, #f028fd, #2bdeac);
}

.pyramid-loader .wrapper .side3 {
  transform: rotateX(30deg);
  background: conic-gradient(#2f2585, #d8cce6, #f028fd, #2bdeac);
}

.pyramid-loader .wrapper .side4 {
  transform: rotateX(-30deg);
  background: conic-gradient(#2bdeac, #f028fd, #d8cce6, #2f2585);
}

.pyramid-loader .wrapper .shadow {
  width: 60px;
  height: 60px;
  background: #8b5ad5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
}
/* ----------------------旋转的三角体结束 */
</style>